
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>BYTESC website</title>
    <link rel="stylesheet" href="./static/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./static/MDB5-STANDARD-UI-KIT-Free-6.2.0/css/mdb.min.css">
    <link rel="stylesheet" href="./static/bootstrap-icons-1.10.4/font/bootstrap-icons.css">
    <link rel="stylesheet" href="./static/fontawesome-free-6.4.0-web/css/fontawesome.min.css">
    <link rel="stylesheet" href="./static/fontawesome-free-6.4.0-web/css/brands.min.css">
    <link rel="stylesheet" href="./static/fontawesome-free-6.4.0-web/css/solid.min.css">

    <style>
      .card:hover{
        /* border: 2px solid transparent;
        border-radius: 10px;
        background-clip: padding-box, border-box;
        background-origin: padding-box, border-box;
        background-image: linear-gradient(to right, #ffffff, #ffffff), linear-gradient(90deg, #8F41E9, #a1c0ff); */
        box-shadow: 4px 20px 40px 5px rgba(0, 0, 0, .1); 
        margin-top: 5px !important;
      }
      /* .card{
        border: 2px solid transparent;
        border-radius: 10px;
      } */
    </style>
</head>

<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
  <div class="container-fluid">

    <a class="navbar-brand" href="#"> BYTESC </a>
    <a class="navbar-brand me-2" href="#">
<!--      <img src="https://mdbcdn.b-cdn.net/img/logo/mdb-transaprent-noshadows.webp" height="16" alt="Logo" loading="lazy" style="margin-top: -1px;"/>-->
    </a>
    <button
            class="navbar-toggler"
            type="button"
            data-mdb-toggle="collapse"
            data-mdb-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation"
    >
      <i class="fas fa-bars"></i>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link" href="#prj">Projects</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#ctc">Contact</a>
        </li>
<!--        <li class="nav-item dropdown">-->
<!--          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">-->
<!--            Dropdown-->
<!--          </a>-->
<!--          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">-->
<!--            <li><a class="dropdown-item" href="#">Action</a></li>-->
<!--            <li><a class="dropdown-item" href="#">Another action</a></li>-->
<!--            <li><hr class="dropdown-divider"></li>-->
<!--            <li><a class="dropdown-item" href="#">Something else here</a></li>-->
<!--          </ul>-->
<!--        </li>-->
<!--        <li class="nav-item">-->
<!--          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>-->
<!--        </li>-->
      </ul>
      <!-- Right elements -->
      <div class="d-flex align-items-center">
        <!-- Icon -->
        <a class="text-reset me-3" href="./index.html">
          <i class="far fa-language" style="color: #f0f0f0;"></i>
          <span class="badge rounded-pill badge-notification bg-danger">中文</span>
          <span style="color: white">简体中文</span>
        </a>
        <a class="text-reset me-3" href="https://github.com/bytesc">
          <i class="fa-brands fa-github" style="color: #f0f0f0;"></i>
          <!-- <span class="badge rounded-pill badge-notification bg-danger">6</span> -->
          <span style="color: white">github</span>
        </a>
        <a class="text-reset me-3" href="https://gitee.com/bytesc">
          <i class="fa-brands fa-square-git" style="color: #ff7522"></i>
          <!-- <span class="badge rounded-pill badge-notification bg-danger">6</span> -->
          <span style="color: #ff7522">gitee</span>
        </a>
        <a class="text-reset me-3" href="./static/img/wechat.png" title="wechat">
          <i class="fa-brands fa-weixin" style="color: #11ff00"></i>
        </a>

        <!-- Notifications -->
        <div class="dropdown">
          <a
                  class="text-reset me-3 dropdown-toggle hidden-arrow"
                  href="#"
                  id="navbarDropdownMenuLink"
                  role="button"
                  data-mdb-toggle="dropdown"
                  aria-expanded="false"
                  title="email"
          >
            <i class="fas fa-envelope" style="color: #f0f0f0;"></i>
          </a>
          <ul
                  class="dropdown-menu dropdown-menu-end"
                  aria-labelledby="navbarDropdownMenuLink"
          >
            <li>
              <a class="dropdown-item" href="mailto:bytesc@163.com"><i class="fas fa-envelope me-3"></i>bytesc@163.com</a>
            </li>
          </ul>
        </div>
        <!-- Avatar -->
        <div class="dropdown">
          <a
                  class="dropdown-toggle d-flex align-items-center hidden-arrow"
                  href="#"
                  id="navbarDropdownMenuAvatar"
                  role="button"
                  data-mdb-toggle="dropdown"
                  aria-expanded="false"
          >
            <img
                    src="./static/img/tx.png"
                    class="rounded-circle"
                    height="25"
                    alt="Black and White Portrait of a Man"
                    loading="lazy"
            />
          </a>
          <ul
                  class="dropdown-menu dropdown-menu-end"
                  aria-labelledby="navbarDropdownMenuAvatar"
          >
            <li>
              <a class="dropdown-item" href="http://blog.bytesc.top"><i class="fa-brands fa-blogger me-3"></i>BLOG</a>
            </li>
            <li>
              <a class="dropdown-item" href="#prj"><i class="fa-solid fa-laptop-code me-3"></i>Projects</a>
            </li>
            <li>
              <a class="dropdown-item" href="#ctc"><i class="fa-solid fa-address-book me-3"></i>Contact</a>
            </li>
          </ul>
        </div>
      </div>
      <!-- Right elements -->
    </div>
  </div>
</nav>


<div>
  <div>
    <!-- Carousel wrapper -->
   <div id="carouselBasicExample" class="carousel slide carousel-fade" data-mdb-ride="carousel">
     <!-- Indicators -->
     <div class="carousel-indicators">
       <button
         type="button"
         data-mdb-target="#carouselBasicExample"
         data-mdb-slide-to="0"
         class="active"
         aria-current="true"
         aria-label="Slide 1"
       ></button>
       <button
         type="button"
         data-mdb-target="#carouselBasicExample"
         data-mdb-slide-to="1"
         aria-label="Slide 2"
       ></button>
       <button
         type="button"
         data-mdb-target="#carouselBasicExample"
         data-mdb-slide-to="2"
         aria-label="Slide 3"
       ></button>
     </div>
   
     <!-- Inner -->
     <div class="carousel-inner">

       <!-- Single item -->
      <div class="carousel-item active">
        <div class=" ratio ratio-21x9">
          <img src="./static/img/dtc.png" class="d-block w-100" alt=""/>
          <div class="mask" style="background-color: hsla(0, 0%, 0%, 0.6)"></div>
        </div>
        <div class="carousel-caption d-none d-md-block">
         <h5>LLM-Based Data-Copilot</h5> 
         <p>A natural language query system using LangChain and LLM for intelligent, multi-table database queries, statistical computations, and chart generation.</p>         </div>
      </div>

       <!-- Single item -->
       <div class="carousel-item">
         <div class=" ratio ratio-21x9">
             <img src="./static/img/pror2.png" class="d-block w-100" alt=""/>
             <div class="mask" style="background-color: hsla(0, 0%, 0%, 0.6)"></div>
         </div>
         <div class="carousel-caption d-none d-md-block">
          <h5>Alzheimer's Intelligent Diagnosis</h5> 
          <p>An Alzheimer's intelligent diagnosis tool based on PyTorch, using Convolutional Neural Networks (CNN) for brain MRI image classification and generating parameter correlation heatmaps.</p>         </div>
       </div>
  
   
       <!-- Single item -->
       <div class="carousel-item">
         <div class=" ratio ratio-21x9">
           <img src="./static/img/prox.png" class="d-block w-100" alt=""/></div>
           <div class="mask" style="background-color: hsla(0, 0%, 0%, 0.6)"></div>
         <div class="carousel-caption d-none d-md-block">
          <h5>Stay Tuned</h5> 
          <p>More projects are coming in the future...</p>
         </div>
       </div>
     </div>
     <!-- Inner -->
   
     <!-- Controls -->
     <button class="carousel-control-prev" type="button" data-mdb-target="#carouselBasicExample" data-mdb-slide="prev">
       <span class="carousel-control-prev-icon" aria-hidden="true"></span>
       <span class="visually-hidden">Previous</span>
     </button>
     <button class="carousel-control-next" type="button" data-mdb-target="#carouselBasicExample" data-mdb-slide="next">
       <span class="carousel-control-next-icon" aria-hidden="true"></span>
       <span class="visually-hidden">Next</span>
     </button>
   </div>
   <!-- Carousel wrapper -->
   </div>
   
</div>

<section class="d-flex justify-content-center p-4 border-bottom" id="prj">
        <h5 style="text-align: center"><i class="fa-solid fa-code"></i> My Projects <i class="fa-solid fa-code"></i></h5>
</section>

<div class="float-right">
  <a href="#" title="Back to top" class="back-to-top" style="position: fixed; bottom: 20px; right: 20px; z-index: 9999;">
    <h1><i class="fa-solid fa-square-caret-up"></i></h1>
  </a>
</div>
<!-- 
  <button type="button" class="btn btn-primary" data-mdb-toggle="modal" data-mdb-target="#exampleModal">
    Launch demo modal
  </button>
  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">...</div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-mdb-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div> -->

<div class="container">
  <div class="row">

    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12" id="ai-light">
        <div class="card" style="width: auto; margin: 10px;">
          <div class=" ratio ratio-16x9">
            <img src="./static/img/pro1.png" class="card-img-top" alt="...">
          </div>
          <div class="card-body">
            <h5 class="card-title" style="height: 60px"><i class="fa-solid fa-robot"></i> Alzheimer's Intelligent Diagnosis-Light</h5> 
            <p class="card-text" style="height: 140px">A lightweight version of the Alzheimer's intelligent diagnosis tool based on PyTorch and PyWebIO, using Convolutional Neural Networks for brain MRI image classification.</p>            
            <div class="row" style="margin-top: 10px; margin-bottom: 10px;">
              <div>
                <span class="badge rounded-pill badge-warning">Python</span>
                <span class="badge rounded-pill badge-danger">PyTorch</span>
                <span class="badge rounded-pill badge-success">PyWebIO</span>
              </div>
            </div>
            <div class="row">
              <div class="col-3" style="text-align: center;"><a href="https://github.com/bytesc/Image-Recognition-system" class="btn btn-dark" title="github">
                <i class="fa-brands fa-github" style="color: #f0f0f0;"></i>
              </a></div>
              <div class="col-3" style="text-align: center;"><a href="https://gitee.com/bytesc/image-recognition-system" class="btn btn-dark" title="gitee">
                <i class="fa-brands fa-square-git" style="color: #ff7522"></i>
              </a></div>
              <div class="col-6" style="text-align: center;"><a href="./zlz/index.html" class="btn btn-success">
                  <i class="fa-regular fa-desktop" style="color: #f0f0f0;"></i> demo
                </a></div>
            </div>
          </div>
      </div>
    </div>


    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12" id="cifar10">
      <div class="card" style="width: auto; margin: 10px;">
        <div class=" ratio ratio-16x9">
          <img src="./static/img/dtc.png" class="card-img-top" alt="...">
        </div>
        <div class="card-body">
          <h5 class="card-title" style="height: 60px"><i class="fa-solid fa-robot"></i> LLM-Based Data-Copilot</h5> 
          <p class="card-text" style="height: 140px">A natural language query system using LangChain and LLM for intelligent, multi-table database queries, statistical computations, and chart generation.</p>
           <div class="row" style="margin-top: 10px; margin-bottom: 10px;">
            <div>
              <span class="badge rounded-pill badge-warning">Python</span>
              <span class="badge rounded-pill badge-danger">LLM</span>
              <span class="badge rounded-pill badge-success">LangChain</span>
            </div>
          </div>
          <div class="row">
            <div class="col-3" style="text-align: center;"><a href="https://github.com/bytesc/data-copilot" class="btn btn-dark" title="github">
              <i class="fa-brands fa-github" style="color: #f0f0f0;"></i>
            </a></div>
            <div class="col-3" style="text-align: center;"><a href="https://gitee.com/bytesc/data-copilot" class="btn btn-dark" title="gitee">
              <i class="fa-brands fa-square-git" style="color: #ff7522"></i>
            </a></div>
            <div class="col-6" style="text-align: center;"><a href="" class="btn btn-success disabled">
              <i class="fa-regular fa-desktop" style="color: #f0f0f0;"></i> demo
            </a></div>
          </div>
        </div>
      </div>
    </div>


    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12">
      <div class="card" style="width: auto; margin: 10px;">
        <div class=" ratio ratio-16x9">
          <img src="./static/img/go-crud.png" class="card-img-top" alt="...">
        </div>
        <div class="card-body">
          <h5 class="card-title" style="height: 60px"><i class="fa-solid fa-cloud"></i> Go-based distributed information management system</h5>
           <p class="card-text" style="height: 140px">A distributed system using Golang, gRPC, Gin, Redis, MySQL, Kafka, Etcd, and Vue3 for Web and microservices-based CRUD operations and caching.</p>
           <div class="row" style="margin-top: 10px; margin-bottom: 10px;">
            <div>
              <span class="badge rounded-pill badge-danger">Golang</span>
              <span class="badge rounded-pill badge-info">grpc</span>
              <span class="badge rounded-pill badge-success">Vue3</span>
              <span class="badge rounded-pill badge-primary">Mysql</span>
            </div>
          </div>
          <div class="row">
            <div class="col-3" style="text-align: center;"><a href="https://github.com/bytesc/go-grpc-crud-template" class="btn btn-dark" title="github">
              <i class="fa-brands fa-github" style="color: #f0f0f0;"></i>
            </a></div>
            <div class="col-3" style="text-align: center;"><a href="https://gitee.com/bytesc/go-grpc-crud-template" class="btn btn-dark" title="gitee">
              <i class="fa-brands fa-square-git" style="color: #ff7522"></i>
            </a></div>
            <div class="col-6" style="text-align: center;"><a href="http://bytesc.top:8009" class="btn btn-success">
              <i class="fa-regular fa-desktop" style="color: #f0f0f0;"></i> demo
            </a></div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12" id="erp">
      <div class="card" style="width: auto; margin: 10px;">
        <div class=" ratio ratio-16x9">
          <img src="./static/img/pro-erp.png" class="card-img-top" alt="...">
        </div>
        <div class="card-body">
          <h5 class="card-title" style="height: 60px"><i class="fa-regular fa-laptop-code"></i> FastAPI-based Simple ERP System</h5> 
          <p class="card-text" style="height: 140px">A simple ERP system based on FastAPI and SQLite3. It utilizes DFS for material planning and delivery scheduling based on BOM, inventory, and Manufacturing Production Schedule (MPS).</p>
            <div class="row" style="margin-top: 10px; margin-bottom: 10px;">
            <div>
              <span class="badge rounded-pill badge-warning">Python</span>
              <span class="badge rounded-pill badge-success">FastAPI</span>
              <span class="badge rounded-pill badge-primary">SQLite3</span>
            </div>
          </div>
          <div class="row">
            <div class="col-3" style="text-align: center;"><a href="https://github.com/bytesc/simple-erp-system" class="btn btn-dark" title="github">
              <i class="fa-brands fa-github" style="color: #f0f0f0;"></i>
            </a></div>
            <div class="col-3" style="text-align: center;"><a href="https://gitee.com/bytesc/simple-erp-system" class="btn btn-dark" title="gitee">
              <i class="fa-brands fa-square-git" style="color: #ff7522"></i>
            </a></div>
            <div class="col-6" style="text-align: center;"><a href="http://s.bytesc.top:6009" class="btn btn-success">
              <i class="fa-regular fa-desktop" style="color: #f0f0f0;"></i> demo
            </a></div>
          </div>
        </div>
      </div>
    </div>


    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12" id="cifar10">
      <div class="card" style="width: auto; margin: 10px;">
        <div class=" ratio ratio-16x9">
          <img src="./static/img/pro3.png" class="card-img-top" alt="...">
        </div>
        <div class="card-body">
          <h5 class="card-title" style="height: 60px"><i class="fa-solid fa-robot"></i> Image Classification with CIFAR10</h5> 
          <p class="card-text" style="height: 140px">A simple image classification tool based on PyTorch and PyWebIO. It utilizes a Convolutional Neural Network (CNN) to classify the 10 classes of images in the CIFAR10 dataset.</p>
           <div class="row" style="margin-top: 10px; margin-bottom: 10px;">
            <div>
              <span class="badge rounded-pill badge-warning">Python</span>
              <span class="badge rounded-pill badge-danger">PyTorch</span>
              <span class="badge rounded-pill badge-success">PyWebIO</span>
            </div>
          </div>
          <div class="row">
            <div class="col-3" style="text-align: center;"><a href="https://github.com/bytesc/Image_Classify_WebGUI_CIFAR10" class="btn btn-dark" title="github">
              <i class="fa-brands fa-github" style="color: #f0f0f0;"></i>
            </a></div>
            <div class="col-3" style="text-align: center;"><a href="https://gitee.com/bytesc/image_-classify_-web-gui_-cifar10" class="btn btn-dark" title="gitee">
              <i class="fa-brands fa-square-git" style="color: #ff7522"></i>
            </a></div>
            <div class="col-6" style="text-align: center;"><a href="http://s.bytesc.top:6007/?app=page1" class="btn btn-success">
              <i class="fa-regular fa-desktop" style="color: #f0f0f0;"></i> demo
            </a></div>
          </div>
        </div>
      </div>
    </div>



    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12" id="ai-train">
      <div class="card" style="width: auto; margin: 10px;">
        <div class=" ratio ratio-16x9">
          <img src="./static/img/pro5.png" class="card-img-top" alt="...">
        </div>
        <div class="card-body">
          <h5 class="card-title" style="height: 60px"><i class="fa-solid fa-chalkboard-user"></i> Convolutional Neural Network Practical Camp</h5> 
          <p class="card-text" style="height: 140px">Teaches the entire process from data preparation to model training and implementing a web application, using PyTorch and PyWebIO, for the automatic diagnosis of Alzheimer's disease.</p>          
          <div class="row" style="margin-top: 10px; margin-bottom: 10px;">
            <div>
              <span class="badge rounded-pill badge-warning">Python</span>
              <span class="badge rounded-pill badge-danger">PyTorch</span>
              <span class="badge rounded-pill badge-success">PyWebIO</span>
            </div>
          </div>
          <div class="row">
            <div class="col-3" style="text-align: center;"><a href="" class="btn btn-dark disabled" title="gitee">
              <i class="fa-brands fa-github" style="color: #f0f0f0;"></i>
            </a></div>
            <div class="col-3" style="text-align: center;"><a href="" class="btn btn-dark disabled" title="github">
              <i class="fa-brands fa-square-git" style="color: #ff7522"></i>
            </a></div>
            <div class="col-6" style="text-align: center;"><a href="https://www.lanqiao.cn/courses/20145" class="btn btn-primary">
              <i class="fa-solid fa-person-chalkboard"></i> Link
            </a></div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12">
        <div class="card" style="width: auto; margin: 10px;">
          <div class=" ratio ratio-16x9">
            <img src="./static/img/pro2.png" class="card-img-top" alt="...">
          </div>
          <div class="card-body">
            <h5 class="card-title" style="height: 60px"><i class="fa-solid fa-robot"></i> Alzheimer's Intelligent Diagnosis</h5> 
            <p class="card-text" style="height: 140px">An intelligent diagnostic tool for Alzheimer's disease based on PyTorch and PyWebIO. It uses a CNN to classify brain MRI images and generates a heatmap of parameter correlations.</p>
               <div class="row" style="margin-top: 10px; margin-bottom: 10px;">
              <div>
                <span class="badge rounded-pill badge-warning">Python</span>
                <span class="badge rounded-pill badge-danger">PyTorch</span>
                <span class="badge rounded-pill badge-success">PyWebIO</span>
              </div>
            </div>
            <div class="row">
              <div class="col-3" style="text-align: center;"><a href="https://github.com/bytesc/Image_Recognition_WebGUI" class="btn btn-dark" title="github">
                <i class="fa-brands fa-github" style="color: #f0f0f0;"></i>
              </a></div>
              <div class="col-3" style="text-align: center;"><a href="https://gitee.com/bytesc/image_-recognition_-web-gui" class="btn btn-dark" title="gitee">
                <i class="fa-brands fa-square-git" style="color: #ff7522"></i>
              </a></div>
              <div class="col-6" style="text-align: center;"><a href="http://www.bytesc.club:6008/?app=page1" class="btn btn-success disabled">
                <i class="fa-regular fa-desktop" style="color: #f0f0f0;"></i> demo
              </a></div>
            </div>
          </div>
      </div>
    </div>


  <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12">
    <div class="card" style="width: auto; margin: 10px;">
      <div class=" ratio ratio-16x9">
        <img src="./static/img/pro4.png" class="card-img-top" alt="...">
      </div>
      <div class="card-body">
        <h5 class="card-title" style="height: 60px"><i class="fa-regular fa-laptop-code"></i> Database Information Management System</h5> 
        <p class="card-text" style="height: 140px">A database information management system using Django and MySQL. It enables admin login and provides CRUD operations on the database through a web app.</p>
         <div class="row" style="margin-top: 10px; margin-bottom: 10px;">
          <div>
            <span class="badge rounded-pill badge-warning">Python</span>
            <span class="badge rounded-pill badge-success">Django</span>
            <span class="badge rounded-pill badge-primary">Mysql</span>
          </div>
        </div>
        <div class="row">
          <div class="col-3" style="text-align: center;"><a href="https://github.com/bytesc/Django_Management_System_template" class="btn btn-dark" title="github">
            <i class="fa-brands fa-github" style="color: #f0f0f0;"></i>
          </a></div>
          <div class="col-3" style="text-align: center;"><a href="https://gitee.com/bytesc/django_management_system_template" class="btn btn-dark" title="gitee">
            <i class="fa-brands fa-square-git" style="color: #ff7522"></i>
          </a></div>
          <div class="col-6" style="text-align: center;"><a href="#" class="btn btn-success disabled">
            <i class="fa-regular fa-desktop" style="color: #f0f0f0;"></i> demo
          </a></div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12">
    <div class="card" style="width: auto; margin: 10px;">
      <div class=" ratio ratio-16x9">
        <img src="./static/img/pro7.png" class="card-img-top" alt="...">
      </div>
      <div class="card-body">
        <h5 class="card-title" style="height: 60px"><i class="fa-regular fa-laptop-code"></i>C++-based Simple OpenGL Drawing Tool</h5> 
        <p class="card-text" style="height: 140px">A C++ (MSVC) and OpenGL-based drawing tool. It supports dynamic shape drawing using rubber banding technique, bulk polyline clipping with Liang-Barsky algorithm.</p>        
        <div class="row" style="margin-top: 10px; margin-bottom: 10px;">
          <div>
            <span class="badge rounded-pill badge-danger">C++</span>
            <span class="badge rounded-pill badge-success">OpenGL</span>
          </div>
        </div>
        <div class="row">
          <div class="col-3" style="text-align: center;"><a href="https://github.com/bytesc/simple-openl-graphic-tool" class="btn btn-dark" title="github">
            <i class="fa-brands fa-github" style="color: #f0f0f0;"></i>
          </a></div>
          <div class="col-3" style="text-align: center;"><a href="https://gitee.com/bytesc/simple-openl-graphic-tool" class="btn btn-dark" title="gitee">
            <i class="fa-brands fa-square-git" style="color: #ff7522"></i>
          </a></div>
          <div class="col-6" style="text-align: center;"><a href="#" class="btn btn-success disabled">
            <i class="fa-regular fa-desktop" style="color: #f0f0f0;"></i> demo
          </a></div>
        </div>
      </div>
    </div>
  </div>

    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12">
      <div class="card" style="width: auto; margin: 10px;">
        <div class=" ratio ratio-16x9">
          <img src="./static/img/pro6.png" class="card-img-top" alt="...">
        </div>
        <div class="card-body">
          <h5 class="card-title" style="height: 60px"><i class="fa-regular fa-laptop-code"></i> Synchronized Dynamic Curve System</h5>
          <p class="card-text" style="height: 140px">A JavaSwing-based system for drawing dynamic curves. It supports multi-threading and synchronized display of curves and their corresponding coordinate values.</p>
          <div class="row" style="margin-top: 10px; margin-bottom: 10px;">
            <div>
              <span class="badge rounded-pill badge-danger">Java</span>
              <span class="badge rounded-pill badge-success">JavaSwing</span>
            </div>
          </div>
          <div class="row">
            <div class="col-3" style="text-align: center;"><a href="https://github.com/bytesc/simple-curve-system" class="btn btn-dark" title="github">
              <i class="fa-brands fa-github" style="color: #f0f0f0;"></i>
            </a></div>
            <div class="col-3" style="text-align: center;"><a href="https://gitee.com/bytesc/simple-curve-system" class="btn btn-dark" title="gitee">
              <i class="fa-brands fa-square-git" style="color: #ff7522"></i>
            </a></div>
            <div class="col-6" style="text-align: center;"><a href="#" class="btn btn-success disabled">
              <i class="fa-regular fa-desktop" style="color: #f0f0f0;"></i> demo
            </a></div>
          </div>
        </div>
      </div>
    </div>


    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12">
      <div class="card" style="width: auto; margin: 10px;">
        <div class=" ratio ratio-16x9">
          <img src="./static/img/prox.png" class="card-img-top" alt="...">
        </div>
        <div class="card-body">
          <h5 class="card-title" style="height: 60px"><i class="fa-solid fa-arrow-right"></i> Coming Soon</h5>
          <p class="card-text" style="height: 140px">......</p>
          <div class="row" style="margin-top: 10px; margin-bottom: 10px;">
            <div>
              <span class="badge rounded-pill badge-secondary">...</span>
            </div>
          </div>
          <div class="row">
            <div class="col-3" style="text-align: center;"><a href="https://github.com/bytesc/Django_Management_System_template" class="btn btn-dark disabled" title="github">
              <i class="fa-brands fa-github" style="color: #f0f0f0;"></i>
            </a></div>
            <div class="col-3" style="text-align: center;"><a href="https://github.com/bytesc/Django_Management_System_template" class="btn btn-dark disabled" title="gitee">
              <i class="fa-brands fa-square-git" style="color: #ff7522"></i>
            </a></div>
            <div class="col-6" style="text-align: center;"><a href="#" class="btn btn-success disabled">
              <i class="fa-regular fa-desktop" style="color: #f0f0f0;"></i> demo
            </a></div>
          </div>
        </div>
      </div>
    </div>
 
</div>
</div>




<!-- Footer -->
<footer class="text-center text-lg-start bg-light text-muted">
  <!-- Section: Social media -->
  <section class="d-flex justify-content-center justify-content-lg-between p-4 border-bottom">
<!--    &lt;!&ndash; Left &ndash;&gt;-->
<!--    <div class="me-5 d-none d-lg-block">-->
<!--      <span>联系方式：</span>-->
<!--    </div>-->
<!--    &lt;!&ndash; Left &ndash;&gt;-->

<!--    &lt;!&ndash; Right &ndash;&gt;-->
<!--    <div>-->
<!--      <a href="#" class="me-4 text-reset">-->
<!--        <i class="fa-brands fa-weixin"></i>-->
<!--      </a>-->
<!--      <a href="#" class="me-4 text-reset">-->
<!--        <i class="fa-brands fa-qq"></i>-->
<!--      </a>-->
<!--      <a href="#" class="me-4 text-reset">-->
<!--        <i class="fa-solid fa-envelope"></i>-->
<!--      </a>-->
<!--      <a href="https://github.com/bytesc" class="me-4 text-reset">-->
<!--        <i class="fa-brands fa-github"></i>-->
<!--      </a>-->
<!--    </div>-->
<!--    &lt;!&ndash; Right &ndash;&gt;-->
  </section>
  <!-- Section: Social media -->

  <!-- Section: Links  -->
  <section class="" id="ctc">
    <div class="container text-center text-md-start mt-5">
      <!-- Grid row -->
      <div class="row mt-3">
        <!-- Grid column -->
        <div class="col-md-4 col-lg-4 col-xl-4 mx-auto mb-4">
          <!-- Content -->
          <h6 class="text-uppercase fw-bold mb-4">
            <i class="fas fa-gem me-3"></i>BYTESC
          </h6>
          <p>
            <a href="http://www.bytesc.top/en.html"><i class="fa-solid fa-globe"></i> Personal Project Showcase Portal <i class="fa-solid fa-link"></i> </a>
          </p>
          <p>
            Backup links:
            <a href="https://bytesc.github.io"> website </a>
          </p>
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-md-1 col-lg-2 col-xl-2 mx-auto mb-4">
          <!-- Links -->
<!--          <h6 class="text-uppercase fw-bold mb-4">-->
<!--            Products-->
<!--          </h6>-->
<!--          <p>-->
<!--            <a href="#" class="text-reset">Angular</a>-->
<!--          </p>-->
<!--          <p>-->
<!--            <a href="#" class="text-reset">React</a>-->
<!--          </p>-->
<!--          <p>-->
<!--            <a href="#" class="text-reset">Vue</a>-->
<!--          </p>-->
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-md-3 col-lg-3 col-xl-3 mx-auto mb-4">
<!--           Links-->
          <h6 class="text-uppercase fw-bold mb-4">
            Code Repository
          </h6>
          <a href="https://github.com/bytesc" title="github">
            <p><i class="fa-brands fa-github me-3"></i>github <i class="fa-solid fa-link"></i> </p>
          </a>
          <a href="https://gitee.com/bytesc" title="gitee">
            <p><i class="fa-brands fa-square-git me-3"></i>gitee <i class="fa-solid fa-link"></i> </p>
          </a>
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">
          <!-- Links -->
          <h6 class="text-uppercase fw-bold mb-4">Contact</h6>
          <p><i class="fas fa-home me-3"></i>Shanghai, China</p>
          <a href="mailto:bytesc@163.com">
            <p><i class="fas fa-envelope me-3"></i>bytesc@163.com</p>
          </a>
          <a href="./static/img/wechat.png" title="wechat link">
            <p><i class="fa-brands fa-weixin me-3"></i>wechat <i class="fa-solid fa-link"></i></p>
          </a>


        </div>
        <!-- Grid column -->
      </div>
      <!-- Grid row -->
    </div>
  </section>
  <!-- Section: Links  -->

  <!-- Copyright -->
  <div class="text-center pb-2 pt-4" style="background-color: rgba(0, 0, 0, 0.05);">
    <a class="text-reset" href="https://beian.miit.gov.cn/" target="_blank">沪ICP备2023015078号-2</a>
  </div>
  <div class="text-center pb-4 pt-2" style="background-color: rgba(0, 0, 0, 0.05);">
    © 2023 Copyright:
    <a class="text-reset fw-bold" href="https://gitee.com/bytesc/">gitee.com/bytesc</a>
    <a class="text-reset fw-bold" href="https://github.com/bytesc/">github.com/bytesc</a>
  </div>
  <!-- Copyright -->
</footer>
<!-- Footer -->

<script src="./static/bootstrap-5.3.0-alpha1-dist/js/bootstrap.min.js"></script>
<script src="./static/jquery-3.6.4.min.js"></script>
<script src="./static/bootstrap-5.3.0-alpha1-dist/js/bootstrap.bundle.js"></script>
<script src="./static/MDB5-STANDARD-UI-KIT-Free-6.2.0/js/mdb.min.js"></script>

</body>
</html>